<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
    <style>
        .form-control{
            display: inline-block;
            width: 150px;
            padding: 2px 12px;
            height: 28px;
        }
        .inquire{
            width: 1200px;
            margin: 0 auto;
        }
        h4{
            font-size: 16px;
        }
        .btn{
            padding: 2px 12px;
            height: 28px;
        }
        .inputLable{
            padding-right: 5px;
            /* display: inline-block;
            width: 70px; */
            text-align: right;
            /* margin-right: 4px; */
        }
        .selectLable{
            margin: 0;
        }
        .inputWrap{
            overflow: hidden;
        }
        .inputItem{
            float: left;
            margin-right: 20px;
            margin-top: 8px;
            /* width: 340px; */
        }
        .loadingImg{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 25px;
            height: 25px;
            margin: auto;
        }
        input[type=checkbox]{
            display: inline-block;
            width: 15px;
            height: 15px;
        }
        .inquireSubmit{
            margin: 0 10px 0 0;
        }
        .formSubmit{
            text-align: right;
            width: 1105px;
        }
        .alert{
            position: absolute;
            display: none;
            z-index: 10;
            width: 30%;
            top: 10%;
            left: 0;
            right: 0;
            margin: auto
        }
    </style>
</head>
<body>
<div class="alert alertDanger alert-danger alert-dismissible fade in" role="alert">
    <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button> -->
    删除失败
</div>
<div class="alert alertSuccess alert-success alert-dismissible fade in" role="alert">
    <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button> -->
    删除成功
</div>
<div class="content">
    <div class="inquire">
        <div class="header">
            <h4>任务列表</h4>
            <div class="formSubmit">
                <button type="button" class="btn btn-info inquireSubmit">查询</button>
                <button type="button" class="btn btn-default deleteSubimit">删除</button>
            </div>
            <div class="inputWrap">
                <div class="inputItem">
                    <label><span class="inputLable">任务ID:</span><input id="probe_id" class="form-control" type="text"></label>
                </div>
                <div class="inputItem">
                    <label>
                        <span class="inputLable selectLable">任务类型:</span>
                        <select id="delivery" class="form-control">
                            <option value="">全部</option>
                            <option value="0">封堵方式</option>
                            <option value="1">ping方式</option>
                            <option value="2">http方式</option>
                            <option value="3">flash方式</option>
                            <option value="4">dns方式</option>
                            <option value="5">trace方式</option>
                        </select>
                    </label>
                </div>
                <div class="inputItem">
                    <label><span class="inputLable">开始时间:</span><input id="startTimes" class="form-control" type="text"></label>
                </div>
                <div class="inputItem">
                    <label><span class="inputLable">结束时间:</span><input id="endTimes" class="form-control" type="text"></label>
                </div>
                <div class="inputItem">
                    <label><span class="inputLable">IP:</span><input id="probe_ip" class="form-control" type="text"></label>
                </div>
            </div>
            <div class="taskList">
                <div id="dataTables">
                    <table id="task_list" class="display" width="100%"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="../js/common/dimpt.js"></script>
<script>
    var dataTable = $('#task_list').DataTable( {
        serverSide: true,//服务器模式
        bLengthChange: false,
        searching: false,
        bProcessing : true,//加载效果
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "columnDefs" : [{
                "orderable" : false, // 禁用排序
                "targets" : [0], // 指定的列
                "data" : "id",
                "render" : function(data, type, full, meta) {
                    return '<input type="checkbox" value="'+ data + '" name="id"/>';
                }
            }],
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        ajax: {
            url: CONTEXT_PATH+'/rest/probeOperationApi/getTaskListQuery',
            type: 'GET'
        },
        columns: [
            { data: null, title: "<input type='checkbox' name='checklist' id='checkall' />"},
            { title: "任务ID" },
            { title: "任务类型" },
            { title: "IP" },
            { title: "开始时间" },
            { title: "结束时间" },
            { title: "更新时间" }
        ],
        order: [
        ],
        columnDefs: [
            {
                orderable: false,
                render: function(data, type, row, meta) {
                    console.log();
                    if (row[5] !== ""){
                        return '<input disabled=true class="checkList" type="checkbox" name="checklist" value="' + row[0] + '" />'
                    }
                    return '<input class="checkList" type="checkbox" name="checklist" value="' + row[0] + '" />'
                },
                targets: 0
            }
        ]
    });
    $("#task_list_processing").html('').append('<img class="loadingImg" src="images/loading.gif" alt="">');
    //查询指令
    $(".inquireSubmit").click(function (){
        var probe_id = $("#probe_id").val();
        var delivery = $("#delivery").val();
        var startTimes = $("#startTimes").val();
        var endTimes = $("#endTimes").val();
        var probe_ip = $("#probe_ip").val();
        var url = CONTEXT_PATH+'/rest/probeOperationApi/getTaskListQuery?' + 'task_id=' + probe_id + '&' + 'type_id=' + delivery + '&' + 'createtime=' + startTimes + '&' + 'host_ip=' + probe_ip + '&' + 'endtime=' + endTimes;
        dataTable.ajax.url(url).load();
    });
    // 删除指令
    $(".deleteSubimit").click(function (){
        $.ajax({
            url: CONTEXT_PATH+'/rest/probeTask/probeDel',
            type: 'POST',
            data: {taskids: CheckedArry.join(',')},
            success: function (data){
                if (data.msg == 'success'){
                    $(".alertSuccess").fadeIn(500,0).delay(2000).fadeOut(500,0);
                    CheckedArry = [];
                    dataTable.draw(false);
                }else if(data.msg == 'error'){
                    $(".alertDanger").html('删除失败：'+ data.description);
                    $(".alertDanger").fadeIn(500,0).delay(2000).fadeOut(500,0);
                }
            }
        });
    });
    //表格多选框
    var CheckedArry = [];
    function checkall(){
        $("#checkall").change(function (){
            var nowData = dataTable.ajax.json().data.filter(function (item){
                return item[5] == "";
            });
            if (this.checked) {
                nowData.forEach(function (item){
                    var index = CheckedArry.indexOf(item[0]);
                    if (index === -1){
                        CheckedArry.push(item[0]);
                    }
                });
                $(".checkList:enabled").prop('checked', true);
            }else {
                nowData.forEach(function (item){
                    var index = CheckedArry.indexOf(item[0]);
                    CheckedArry.splice(index,1);
                });
                $(".checkList").prop('checked', false);
            }
            console.log(CheckedArry);
        });

    }
    function dataCheckbox(){
        $(".checkList").change(function (){
            var nowData = dataTable.ajax.json().data.filter(function (item){
                return item[5] == "";
            });
            if(this.checked){
                CheckedArry.push(this.value);
                if ($(".checkList:checked").length === nowData.length){
                    $("#checkall").prop("checked", true);
                }
            }else{
                var index = CheckedArry.indexOf(this.value);
                CheckedArry.splice(index,1);
                $("#checkall:enabled").prop("checked", false);
            }
            console.log(CheckedArry);
        });
    }
    dataTable.on('draw', function(){
        dataCheckbox();
        var nowData = dataTable.ajax.json().data.filter(function (item){
            return item[5] == "";
        });
        nowData.forEach(function (item, index){
            if (CheckedArry.indexOf(item[0]) !== -1){
                $(".checkList:enabled").eq(index).prop('checked', true);
            }
        });
        if ($(".checkList:checked").length === nowData.length && nowData.length !== 0){
            $("#checkall").prop('checked', true);
            $("#checkall").prop('disabled', false);
        }else{
            if (nowData.length == 0){
                $("#checkall").prop('disabled', true);
                $("#checkall").prop('checked', false);
                return;
            }
            $("#checkall").prop('checked', false);
            $("#checkall").prop('disabled', false);
        }
    });
    dataTable.on( 'init', function(){
        checkall();
    });
    //时间选择
    function datepiker(){
        var startTime = $('#startTimes').datetimepicker({
            format:"yyyy-mm-dd hh:ii",
            language:"zh-CN",
            autoclose: true,
            todayHighlight:true,
            todayBtn:false
        });
        startTime.on('changeDate',function(ev){
            var starttime=$("#startTimes").val();
            $("#endTimes").datetimepicker('setStartDate',starttime);
            $("#startTimes").datetimepicker('hide');
        });
        var endTime = $('#endTimes').datetimepicker({
            format:"yyyy-mm-dd hh:ii",
            language:"zh-CN",
            autoclose: true,
            todayHighlight:true,
            todayBtn:false
        });
        endTime.on('changeDate',function(ev){
            var starttime=$("#startTimes").val();
            var endtime=$("#endTimes").val();
            $("#startTimes").datetimepicker('setEndDate',endtime);
            $("#endTimes").datetimepicker('hide');
        });
    }
    datepiker();


</script>
</html>